<template>
  <div id="course" v-show="info">
    <c-title :hide="false" text="我的课程"></c-title>

    <div style="margin-top:-1px;">
      <van-cell-group>
          <van-cell @click.native="gotoVip" id="header" center>
            <div slot="title" class="user-info">
              <div  class="touxiang" >
                <img :src="memberInfo.avatar" style="width: 100%; height: 100%; border-radius: 1.5625rem;" />
              </div>
              <div class="nickname-wrapper">
                <p class="nickname">{{ memberInfo.nickname }}</p>
                <span class="level_name" > {{ memberInfo.level_name }}</span>
              </div>
            </div>
            <!-- <span slot="title" style="font-weight: bold; text-align: left;">
              {{ memberInfo.nickname }}
            </span>
            <span slot="default">会员等级:{{ memberInfo.level_name }}</span> -->
          </van-cell>
        </van-cell-group>
    </div>


    <!-- <div class="box">
      <router-link :to="fun.getUrl('CourseMy')">
        <div class="list">
          <van-icon slot="icon" class="iconfont icon-member-mycourse1" size="1.625rem" color="#f15353" style="margin-right: 0.375rem; transform: translateY(2px);"></van-icon>
          <span>我的课程</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <router-link :to="fun.getUrl('CourseHistory')">
        <div class="list">
          <van-icon slot="icon" class="iconfont icon-member-history1" size="1.625rem" color="#f15353" style="margin-right: 0.375rem; transform: translateY(2px);"></van-icon>
          <span>课程观看历史</span>
          <i class="fa fa-angle-right"></i>
          <span style="float: right; margin-right: 0.375rem; color: #8c8c8c; font-size: 14px;">更多</span>
        </div>
      </router-link>
      <router-link :to="fun.getUrl('CourseReward')">
        <div class="list">
          <van-icon slot="icon" class="iconfont icon-member-reward2" size="1.625rem" color="#f15353" style="margin-right: 0.375rem; transform: translateY(2px);"></van-icon>
          <span>我的打赏</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
      <router-link :to="fun.getUrl('CourseIndex', { fromHome: 1 })">
        <div class="list" id="last">
          <van-icon slot="icon" class="iconfont icon-member-course3" size="1.625rem" color="#f15353" style="margin-right: 0.375rem; transform: translateY(2px);"></van-icon>
          <span>全部课程</span>
          <i class="fa fa-angle-right"></i>
        </div>
      </router-link>
    </div> -->

    <ul class="course-list">
      <router-link :to="fun.getUrl('CourseMy')" tag="li">
        <img :src="require('../../../assets/images/my_course.png')"></img>
        <p>我的课程</p>
      </router-link>
      <router-link :to="fun.getUrl('CourseHistory')" tag="li">
        <img :src="require('../../../assets/images/course_history.png')"></img>
        <p>课程观看历史</p></router-link>
      <router-link :to="fun.getUrl('CourseReward')" tag="li">
        <img :src="require('../../../assets/images/my_play_tour.png')"></img>
        <p>我的打赏</p></router-link>
      <router-link :to="fun.getUrl('CourseIndex', { fromHome: 1 })" tag="li">
        <img :src="require('../../../assets/images/all_course.png')"></img>
        <p>全部课程</p></router-link>
    </ul>
    <div class="carefully_chosen_more">
      <img :src="require('../../../assets/images/rectangle10(2).png')" class="bg-img" alt="">
      <div class="left bold">推荐课程</div>
      <router-link :to="fun.getUrl('CourseIndex', { fromHome: 1 })">
        <div class="right">更多<i class="fa fa-angle-right"></i></div>
      </router-link>
    </div>
    <div class="full_video">
      <d-list :loading="more_loading" :finished="finished" @load="onLoad" >
        <ul class="full_video_list">
            <li  v-for="(item,i) in newGoodList" :key='i' @click="goToDetail(item.goods_id)">
              <div class="full_video_left">
                <img :src="item.thumb"  alt="">
              </div>
              <div class="full_video_right">
                <div class="video_name">{{ item.goods_title }}</div>
                <div class="left" > 讲师：{{ item.real_name }}</div>
                <div class="full_video_bottom">
                  <div class="leftContent">
                    <div class="pitch_number">共<span style="color:#FC6060;margin:0 .125rem">{{ item.course_chapter_num }}</span>小节</div>
                  </div>
                  <div class="price" v-if="item.has_one_goods && item.has_one_goods.vip_level_status && item.has_one_goods.vip_level_status.status==1">
                    {{$i18n.t('money')}} <span class="cost2">{{ item.has_one_goods.vip_level_status.word }}</span>
                  </div>
                  <div class="price" v-else>{{$i18n.t('money')}} {{ item.price }}</div>
                </div>
              </div>
            </li>
        </ul>
      </d-list>
      <div class="video_more" @click="getMoreData" v-if="isLoadMore">
          <span>{{ $i18n.t("加载更多") }}</span>
      </div>
    </div>
  </div>
</template>

<script>
import course_manage_controller from "./course_manage_controller";
export default course_manage_controller;
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" rel="stylesheet/scss" scoped>
#course{
    background: #fff;
    height: 100vh;
    .nickname{
      font-size:1rem;
      font-weight:500;
    }
    .user-info{
      display:flex;
      color:#fff;
      text-align:left;
    }
    .level_name{
      display:inline-block;
      margin-top:.5375rem;
      color:#BA750C;
      font-size:.6875rem;
      padding:.3125rem .5rem;
      background-color:#fff;
      border-radius:100px;
    }
    .nickname-wrapper{
      padding-top: 0.3875rem;
      // padding-bottom: 0.1875rem;
    }
  .course-list{
    padding:1.6875rem 1.5938rem;
    display:flex;
    justify-content:space-between;
    color:#000;
    font-size:.75rem;
  }
  ::v-deep .van-nav-bar__content  {
    background:#FF8924;
  }
   ::v-deep .van-button__content{
    background:#FF8924;
   }
  ::v-deep .van-nav-bar__title{
    color:#fff;
    font-size:1.125rem;
    font-weight:unset;
  }
  ::v-deep .van-nav-bar .van-icon{
    color:#fff;
  }
}
#header {
  padding: 1.25rem;
  background-color: #FF8924;
  line-height: 1rem;

  span {
    color: #fff;
  }
}

.touxiang {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 50%;
  margin-right: 0.625rem;
  // border: solid 0.125rem #fff;
  overflow: hidden;
  flex-shrink: 0;
}

#last {
  border: none;
}

.box {
  background-color: #fff;
  width: 100%;

  .list {
    font-size: 15px;
    height: 2.75rem;
    line-height: 2.75rem;
    border-bottom: solid 0.0625rem #ebebeb;
    margin-left: 0.875rem;
    padding-right: 0.875rem;
    text-align: left;
    display: flex;
    align-items: center;

    i.fa.fa-angle-right {
      line-height: 2.75rem;
      font-size: 1.5rem;
      color: #c9c9c9;
      float: right;
      position: absolute;
      right: 0.875rem;
    }

    span:last-child {
      position: absolute;
      right: 1.625rem;
    }
  }
}

#header .van-cell__title {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

::v-deep .van-cell--clickable:active {
  background-color: #fff;
}

.carefully_chosen_more {
  position:relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;

  .bg-img{
    position: absolute;
    width: 1rem;
    height: 100%;
    left: .5625rem;
  }

  .left {
    line-height: 1.156rem;
    height: 1.156rem;
    font-size: 1rem;
    padding-left: 0.813rem;
  }

  .right {
    line-height: 1.156rem;
    height: 1.156rem;
    padding-right: 1.438rem;
    color: #999;
    font-size: 0.875rem;

    i {
      padding-left: 0.625rem;
      font-size: 1.2rem;
    }
  }
}

.full_video {
  background: #fff;
  padding-top: 1.625rem;
  .left{
    text-align: left;
  }

  .full_video_list {
    margin-left: 0.781rem;
    margin-right: 0.781rem;

    li {
      padding-left: 0.375rem;
      border-bottom: 1px solid #f2f2f7;
      padding-bottom: 0.906rem;
      margin-bottom: 0.781rem;
      display: flex;

      .full_video_left {
        border-radius: .25rem;
        overflow: hidden;
        width: 4.6875rem;
        height: 4.6875rem;
        margin-right: 1.156rem;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .full_video_right {
        flex: 1;
        position: relative;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        // padding-top: 0.2rem;

        .video_name {
          text-align: left;
          line-height: 1rem;
          // height: 1.5rem;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          // margin-bottom: 0.25rem;
        }

        .full_video_bottom {
          // position: absolute;
          // bottom: 0.2rem;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .leftContent {
            .pitch_number {
              text-align: left;
              height: 0.9rem;
              line-height: 0.9rem;
              font-size: 0.875rem;
              color: #999;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              width: 8rem;
            }

            .left {
              width: 8rem;
              white-space: nowrap;
              overflow: hidden;
              text-overflow: ellipsis;
              font-size: 0.75rem;
              color: #999;
              text-align: left;
            }
          }

          .price {
            width: 6rem;
            white-space: nowrap;
            overflow: hidden;
            line-height: 0.938rem;
            height: 0.938rem;
            text-overflow: ellipsis;
            font-size: 0.875rem;
            color: #e20606;
            margin-right: 0.563rem;
            text-align: right;

            .cost2 {
              color: #ccc;
              font-size: 0.75rem;
              padding-left: 0.4rem;
            }
          }

          .gratis {
            width: 6rem;
            white-space: nowrap;
            overflow: hidden;
            line-height: 0.938rem;
            height: 0.938rem;
            text-overflow: ellipsis;
            color: #ff9d27;
            font-size: 0.875rem;
            text-align: right;
            margin-right: 0.563rem;
          }
        }
      }
    }
  }

  .video_more {
    font-size: 0.799rem;
    line-height: 0.938rem;
    height: 0.938rem;
    color: #999;
    padding-bottom: 1.531rem;
  }
}
</style>
